<!DOCTYPE html>
{% load staticfiles %}
<html style="height: 100%;width: 100%;">
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>


	</head>
	<body style="height: 100%;width: 100%; background-color: rgb(38, 58, 71);overflow: hidden;margin-left: 0;margin-top: 0;">
		<div style="width: 100%;height: 10%;background-color: rgb(25, 41, 52);">
			<div style="width: 5%;height: 100%;background-color: rgb(0, 173, 239);float: left;">
				<img src="{% static "img/logo.png" %}" style="height: 100%;margin-top: 2px;" />
			</div>
			<div style="width: 95%;height: 100%;margin-left: 7%;padding-top: 1%;font-size: 1.5vw;color: white;">
				AID急救教学-个人中心
			</div>

		</div>

		<div style="width: 100%;height: 90%">
			<div style="width: 5%;height: 100%;background-color: rgb(25, 41, 52);float: left;">
				<div style="width: 100%;height: 90%;">
					<div style="width: 100%;text-align: center;height: 12%;cursor: pointer;" id="1" onmouseover="over(1)" onmouseout="out(1)"
					 onclick="page1()">
						<img src="{% static "img/icon.png" %}" style="width: 20%;margin-top: 30%;" />
					</div>
					<div style="width: 100%;text-align: center;height: 12%;cursor: pointer;" id="2" onmouseover="over(2)" onmouseout="out(2)"
					 onclick="page2()">
						<img src="{% static "img/icon1.png" %}" style="width: 20%;margin-top: 30%;" />
					</div>
				</div>

				<div style="width: 100%;background-color: rgb(18, 30, 39);height: 10%;text-align: center;cursor: pointer;" onclick="window.location.href='登录.html'">
					<img src="{% static "img/icon2.png" %}" style="width: 25%;margin-top: 30%;" />
				</div>

			</div>

			<div id="view" style="width: 95%;height: 100%;float: left;">
				<div id="div1" style="width: 15%;height: 30%;position: absolute;top: 10%;left: 5%;background: #121e27;left:8%;top: 15%;">
					<div style="width: 100%;height: 10%;">
						<div id="move1" style="width: 10%;height: 100%;background: url({% static "img/move.png" %});background-size: 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;"></div>

					</div>
					<div style="width: 100%;height:50%;text-align: center;">
						<img id="touxiang" style="height: 80%;margin-top: 10%;" />
					</div>
					<div id="id" style="width: 100%;height: 15%;text-align: center;color: white;font-size: 1vw;">
						欢迎您{{ username }}
					</div>

					<div style="width: 100%;height: 25%;text-align: center;color:dodgerblue;font-size: 1vw;">学员/救护员</div>
				</div>
				<div id="div2" style="width: 20%;height: 40%;position: absolute;background: #192934;left:25%;top: 15%;">
					<div style="width: 100%;height: 10%;">
						<div id="move2" style="width: 10%;height: 100%;background: url({% static "img/move.png" %}) no-repeat;background-size: , 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
						<div style="width:75%;height: 100%;float: left;text-align: center;color: white;font-size:1.5vw;margin-top: 2%;">我的评分</div>
						<div style="width: 10%;height: 100%;background: url({% static "img/settings.png" %}) no-repeat;background-size: , 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
					</div>
					<div id="chart4" style="width: 100%;height:90%;text-align: center;">
					</div>
				</div>
				<div id="div3" style="width: 35%;height: 35%;position: absolute;background: #192934;left:8%;top: 60%;">
					<div style="width: 100%;height: 20%;">
						<div id="move3" style="width: 10%;height: 100%;background: url({% static "img/move.png" %}) no-repeat;background-size: , 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
						<div style="width:76%;height: 100%;float: left;text-align: center;color: white;font-size:1.5vw;margin-top: 2%;">我的私信</div>
						<div style="width: 10%;height: 100%;background: url({% static "img/settings.png" %}) no-repeat;background-size:, 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
					</div>
					<div style="width: 100%;height:80%;text-align: center;background: #121e27">
						<div id="sixin1" style="width: 100%;height: 50%;">
							<div id="sixin1_touxiang" style="width: 20%;height: 100%;text-align: center;float: left;"></div>

							<div style="width: 80%;height: 100%;text-align: center;float: left;">
								<div style="width: 100%;height: 30%;">
									<div id="sixin1_senter" style="height: 100%;width: 40%;color: white;font-size: 1.5vw;float: left;text-align: left;"></div>
									<div id="sixin1_senttime" style="padding-top:2%;height:50%;width: 30%;color: dodgerblue;font-size: 0.8vw;float: left;text-align: left;\"></div>
								</div>
								<div id="sixin1_content" style="width: 100%;height: 60%;color: gray;font-size: 1vw;text-align: left;"></div>
							</div>
						</div>
						<div id="sixin2" style="width: 100%;height: 50%;">
							<div id="sixin2_touxiang" style="width: 20%;height: 100%;text-align: center;float: left;"></div>

							<div style="width: 80%;height: 100%;text-align: center;float: left;">
								<div style="width: 100%;height: 30%;">
									<div id="sixin2_senter" style="height: 100%;width: 40%;color: white;font-size: 1.5vw;float: left;text-align: left;"></div>
									<div id="sixin2_senttime" style="padding-top:2%;height:50%;width: 30%;color: dodgerblue;font-size: 0.8vw;float: left;text-align: left;\"></div>
								</div>
								<div id="sixin2_content" style="width: 100%;height: 60%;color: gray;font-size: 1vw;text-align: left;"></div>
							</div>
						</div>
					</div>
				</div>
				<div id="div4" style="width: 23%;height: 60%;position: absolute;background: #192934;left:47%;top: 15%;">
					<div style="width: 100%;height: 10%;margin-top:5%">
						<div style=""></div>
						<div id="move4" style="width: 10%;height: 100%;background: url({% static "img/move.png" %}) no-repeat;background-size: , 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
						<div style="width:76%;height: 100%;float: left;text-align: center;color: white;font-size:1.5vw;margin-top: 2%;">我的报名</div>
						<div style="width: 10%;height: 100%;background: url({% static "img/settings.png" %}) no-repeat;background-size:, 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
					</div>
					<div style="width: 100%;height:87%;text-align: center;background: #121e27">
						<div class="panel-group" id="accordion">
							<div class="panel panel-default"style="background:#121e27;border: #121e27;">
								<div class="panel-heading" style="background:#121e27;border: #121e27;color:white">
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="text-decoration:none">
											已报名的活动
										</a>
									</h4>
								</div>
								<div id="collapseOne" class="panel-collapse collapse"style="color:white;background: #121e27;border: #121e27;">
									<div class="panel-body" style="text-align:left;">
                                        {% for trainactivity in trainActivity %}
										<div id="baoming1" >
											<div id="baoming1_time"style="color:dodgerblue;font-size:0.5vw;"> {{ trainactivity.ActivityDate }}</div>
											<div id="baoming1_name"style="font-size:1.5vw;"> {{ trainactivity.title }}</div>
										</div>
                                        {% endfor %}
                                        {% for recruitactivity in recruitActivity %}
										<div id="baoming2" >
											<div id="baoming2_time"style="color:dodgerblue;font-size:0.5vw;"> {{ recruitactivity.ActivityDate }}</div>
											<div id="baoming2_name"style="font-size:1.5vw;"> {{ recruitactivity.title }}</div>
										</div>
                                        {% endfor %}
									</div>
								</div>
							</div>
						</div>
							<div class="panel-group" id="accordion1">
								<div class="panel panel-default"style="background:#121e27;border: #121e27;">
									<div class="panel-heading" style="background:#121e27;border: #121e27;color:white">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" style="text-decoration:none">
												参与活动须知
											</a>
										</h4>
									</div>
									<div id="collapseTwo" class="panel-collapse collapse "style="color:white;background: #121e27;border: #121e27;">
										<div class="panel-body" style="text-align:left;">
											xxxxx
										</div>
									</div>
								</div>
							</div>
							<div class="panel-group" id="accordion2">
								<div class="panel panel-default"style="background:#121e27;border: #121e27;">
									<div class="panel-heading" style="background:#121e27;border: #121e27;color:white">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree" style="text-decoration:none">
												已通过审核活动
											</a>
										</h4>
									</div>
									<div id="collapseThree" class="panel-collapse collapse "style="color:white;background: #121e27;border: #121e27;">
										<div class="panel-body" style="text-align:left;">
											xxxxx
										</div>
									</div>
								</div>
							</div>
							<div class="panel-group" id="accordion3">
								<div class="panel panel-default"style="background:#121e27;border: #121e27;">
									<div class="panel-heading" style="background:#121e27;border: #121e27;color:white">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion3" href="#collapseFour" style="text-decoration:none">
												未通过审核活动
											</a>
										</h4>
									</div>
									<div id="collapseFour" class="panel-collapse collapse "style="color:white;background: #121e27;border: #121e27;">
										<div class="panel-body" style="text-align:left;">
											xxxxx
										</div>
									</div>
								</div>
							</div>


					</div>
				</div>
				<div id="div5" style="width: 23%;height: 80%;position: absolute;background: #192934;left:73%;top: 15%;">
					<div style="width: 100%;height: 10%;margin-top:5%">

						<div id="move5" style="width: 10%;height: 100%;background: url({% static "img/move.png" %}) no-repeat;background-size: , 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
						<div style="width:76%;height: 100%;float: left;text-align: center;color: white;font-size:1.5vw;margin-top: 2%;">我的活动记录</div>
						<div style="width: 10%;height: 100%;background: url(settings.png) no-repeat;background-size:, 100%;margin-left: 2%;margin-top: 2%;cursor: pointer;float: left;"></div>
					</div>
					<div style="width: 100%;height:70%;text-align: center;background: #121e27">
						<div id="huodong1" style="width: 100%;height: 20%;">
							<div style="width: 70%;height: 100%;float: left;text-align:left;margin-left:5%">
								<div id="huodong1_name" style="width: 100%;height: 40%;color:white;font-size:1.5vw"></div>
								<div id="huodong1_loc" style="width: 100%;height: 60%;color: dodgerblue;font-size:0.8vw"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;">

							</div>
						</div>
						<div id="huodong2" style="width: 100%;height: 20%;">
							<div style="width: 70%;height: 100%;float: left;text-align:left;margin-left:5%">
								<div id="huodong2_name" style="width: 100%;height: 40%;color:white;font-size:1.5vw"></div>
								<div id="huodong2_loc" style="width: 100%;height: 60%;color: dodgerblue;font-size:0.8vw"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;">

							</div>
						</div>
						<div id="huodong3" style="width: 100%;height: 20%;">
							<div style="width: 70%;height: 100%;float: left;text-align:left;margin-left:5%">
								<div id="huodong3_name" style="width: 100%;height: 40%;color:white;font-size:1.5vw"></div>
								<div id="huodong3_loc" style="width: 100%;height: 60%;color: dodgerblue;font-size:0.8vw"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;">

							</div>
						</div>
						<div id="huodong4" style="width: 100%;height: 20%;">
							<div style="width: 70%;height: 100%;float: left;text-align:left;margin-left:5%">
								<div id="huodong4_name" style="width: 100%;height: 40%;color:white;font-size:1.5vw"></div>
								<div id="huodong4_loc" style="width: 100%;height: 60%;color: dodgerblue;font-size:0.8vw"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;">

							</div>
						</div>
						<div id="huodong5" style="width: 100%;height: 20%;">
							<div style="width: 70%;height: 100%;float: left;text-align:left;margin-left:5%">
								<div id="huodong5_name" style="width: 100%;height: 40%;color:white;font-size:1.5vw"></div>
								<div id="huodong5_loc" style="width: 100%;height: 60%;color: dodgerblue;font-size:0.8vw"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;">

							</div>
						</div>

					</div>
					<div style="width:100%;height:15%;text-align:center;margin-top:10%">
                            <button style="width: 50%;height:35%;background: deepskyblue;font-size:1.2vw;color:white;border:none;border-radius:2px ;cursor:pointer;">加载更多</button>

					</div>
				</div>
			</div>
		</div>





		<script>
			//欢迎
			document.getElementById("touxiang").src = "logo2.png" //头像
			//圆环百分比的绘图
			var e = 80; //设置百分比即可
			var Chart4 = echarts.init(document.getElementById('chart4'));
			option = {
				title: {
					show: true,
					text: e + '%',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: "{d}%",
					show: false
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					show: false
				},
				series: {
					name: '',
					type: 'pie',
					radius: ['65%', '85%'],
					avoidLabelOverlap: true,
					hoverAnimation: false,
					label: {
						normal: {
							show: false,
							position: 'center'
						},
						emphasis: {
							show: false
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [{
						value: e,
						name: ''
					}, {
						value: 100 - e,
						name: ''
					}]
				}
			};
			Chart4.setOption(option);
			window.onresize = Chart4.resize;
			//我的私信
			var touxiang = ["<img src='logo.png'style='height: 60%;margin-top: 10%;' />",
				"<img src='logo.png'style='height: 60%;margin-top: 10%;' />"
			]
			var senter = ['Will Smith', 'Tome Cruise']; //名字
			var senttime = ['1 hour ago', '3 hour ago']; //时间
			var content = ['i love yourxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'xxx']; //内容

			document.getElementById('sixin1_touxiang').innerHTML = touxiang[0]
			document.getElementById('sixin1_senter').innerHTML = senter[0];
			document.getElementById('sixin1_senttime').innerHTML = senttime[0];
			document.getElementById('sixin1_content').innerHTML = content[0].substring(0, 50);

			document.getElementById('sixin2_touxiang').innerHTML = touxiang[1]
			document.getElementById('sixin2_senter').innerHTML = senter[1];
			document.getElementById('sixin2_senttime').innerHTML = senttime[1];
			document.getElementById('sixin2_content').innerHTML = content[1].substring(0, 50);
			
			//我的活动
			var huodongname =["xxxx","xxxxxxxx","xxxx","xxxxxx","xxxxxx"];
			var loc=["xxxx","xxxx","xxxxx","xxxxx","xxxxxx"];
			
			document.getElementById('huodong1_name').innerHTML = huodongname[0];
			document.getElementById('huodong1_loc').innerHTML = loc[0];
			
			document.getElementById('huodong2_name').innerHTML = huodongname[1];
			document.getElementById('huodong2_loc').innerHTML = loc[1];
			
			
			document.getElementById('huodong3_name').innerHTML = huodongname[2];
			document.getElementById('huodong3_loc').innerHTML = loc[2];
			
			
			document.getElementById('huodong4_name').innerHTML = huodongname[3];
			document.getElementById('huodong4_loc').innerHTML = loc[3];
			
			
			document.getElementById('huodong5_name').innerHTML = huodongname[4];
			document.getElementById('huodong5_loc').innerHTML = loc[4];
			//报名
            /*
			var baoming_time=['xxxxx','xxxxxx','xxxxxx'];

			var baoming_name=['xxxxx','xxxxxx','xxxxxx'];

			document.getElementById('baoming1_time').innerHTML = baoming_time[0];
			document.getElementById('baoming1_name').innerHTML = baoming_name[0];

			document.getElementById('baoming2_time').innerHTML = baoming_time[1];
			document.getElementById('baoming2_name').innerHTML = baoming_name[1];

			document.getElementById('baoming3_time').innerHTML = baoming_time[2];
			document.getElementById('baoming3_name').innerHTML = baoming_name[2];
		*/
			//托拽
			function drag(div, move) {
				var omov = document.getElementById(move)

				var odiv = document.getElementById(div)
				omov.onmousedown = function(ev) {
					var ev = ev || event;
					var disX = ev.clientX - odiv.offsetLeft;
					var disY = ev.clientY - odiv.offsetTop;
					document.onmousemove = function(ev2) {
						var ev2 = ev2 || event;
						var left = ev2.clientX - disX;
						var top = ev2.clientY - disY;
						var w = document.documentElement.clientWidth || document.body.clientWidth;
						var h = document.documentElement.clientHeight || document.body.clientHeight;
						if (left > w - odiv.offsetWidth) {
							left = w - odiv.offsetWidth
						}
						if (left < 0) {
							left = 0;
						}
						if (top < 0) {
							top = 0;
						}
						if (top > h - odiv.offsetHeight) {
							top = h - odiv.offsetHeight
						}
						odiv.style.left = left + "px";
						odiv.style.top = top + "px"
					}
					document.onmouseup = function(ev2) {
						document.onmousemove = null
					}
				}
			}
			drag("div1", "move1")
			drag("div2", "move2")
			drag("div3", "move3")
			drag("div4", "move4")
			drag("div5", "move5")
			//侧边栏背景


			function over(id) {
				var x = document.getElementById(id).style.backgroundColor = "rgb(38, 58, 71)";
			}

			function out(id) {
				var x = document.getElementById(id).style.backgroundColor = "";
			}
			//侧边栏变换

			function page1() {
				document.getElementById("view").style.display = "inline";
				document.getElementById("div1").style.left = "8%";
				document.getElementById("div1").style.top = "15%";

				document.getElementById("div2").style.left = "25%";
				document.getElementById("div2").style.top = "15%";

				document.getElementById("div3").style.left = "8%";
				document.getElementById("div3").style.top = "60%";
				
				
				document.getElementById("div4").style.left = "47%";
				document.getElementById("div4").style.top = "15%";
				
				document.getElementById("div5").style.left = "73%";
				document.getElementById("div5").style.top = "15%";
			}

			function page2() {

				document.getElementById("view").style.display = "none";
			}
		</script>
	</body>
</html>
